<template>
	<div class="icons">
		<swiper :options="swiperOption" v-if="showIcon">
			<swiper-slide v-for="(page,index) in pages" :key="index">
				<div class="icon-img-area" v-for="item of page" :key="item.id" >
					<div class="img-area">
						<img class="icon-img" :src="item.imgSrc"/>
					</div>
					<p class="icon-desc">{{item.iconDesc}}</p>
				</div>
			</swiper-slide>
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
	
</template>

<script>
export default{
	name: 'homeIcon',
	props:{
		iconList:Array
	},
	data () {
		return {
			swiperOption:{
				pagination:'.swiper-pagination',
      			loop:true
			},
		}
	},
	computed:{
		pages (){
			const pages=[]
			this.iconList.forEach((item,index)=>{
				const page=Math.floor(index/8)
				if(!pages[page]){
					pages[page]=[]
				}
				pages[page].push(item)
				
			})
			return pages
		},
		showIcon () {
			return this.iconList.length
		}
	}
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl";
  @import "~styles/mixins.styl";
    .icons >>> .swiper-slide
      height:0
      padding-bottom:50%
	.icons
	  overflow:hidden
	  height:0
	  padding-bottom:50%
	  .icon-img-area
	    position:relative
	    overflow:hidden
	    width:25%
	    padding-bottom:25%
	    float:left
	    .img-area
	      position:absolute
	      top:0
	      left:0
	      right:0
	      bottom:.44rem
	      box-sizing:border-box
	      padding-top:0.1rem
	      .icon-img
	        position:relative
	        display: block
	        height:100%
	        margin:0 auto
	    .icon-desc
	      position:absolute
	      bottom:0
	      left:0
	      height:.44rem
	      width:100%
	      line-height:.44rem
	      text-align:center
	      font-size:.22rem
	      color:$textDarkColor
	      ellipsis()
	      
</style>